<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.css">
		<link rel="stylesheet" href="../../css/mycss/detail.css">
		<link rel="stylesheet" href="../../css/mycss/common.css">
		<link rel="stylesheet" href="../../fonts/iconfont.css">
	</head>
	<body style="background-color: rgb(236,239,243);max-width: 414px;margin: auto;">
	<div id="warp">
		<header id="header" class="mui-bar mui-bar-nav" style="max-width: 414px;margin: auto;">
			<a style="color: black" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a style="color: black" class="mui-action-back mui-icon mui-icon-redo mui-pull-right"></a>
			<div class="mui-title">
				<ul>
					<li><a>商品</a></li>
					<li><a>详情</a></li>
					<li><a>评论</a></li>
				</ul>
			</div>
		</header>
		<!-- 图片轮播START -->
		<div class="my-slider">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" >
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/750大图.png">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/750大图.png">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/图层-7@2x.png">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/cbd.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/yuantiao.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/shuijiao.jpg">
						</a>
					</div>
				</div>
				<div  class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		<!-- 图片轮播END -->

		<!-- 活动信息START -->
		<div class="active-info" style="color:white">
			<div class="active-info-left" >
				<em>¥</em>
				<span style="font-size: 32px;">2d22</span>
				<span style="font-size: 25px;">.00</span>
			</div>
			<div class="active-info-center">
				<span style="display:block;font-size: 12px;text-decoration:line-through;line-height: 6px">¥46</span>
					<img src="../../images/一元抢购.png"  />  
				</div>
			<div class="active-info-right">
				已有999人购买
			</div>
			<div class="active-info-time">
				距结束还剩:<br />
				<em>00</em>:<em>00</em>:<em>00</em>
			</div>
		</div>
		<!-- 活动信息END -->

		<!-- 产品描述START -->
		<div class="my-desc">
			<span style="font-size: 12px;color: grey">使用过BootStrap之类的应该看了马上就能懂了。MUI里面也是使用的十二列的栅格系统。的栅格系统
			</span> 
		</div>
		<!-- 产品描述END -->
		
		<!-- 产品促销信息START -->
		<div class="buying-info mui-row">

			<div class="mui-col-xs-3"  style="color: #C0C0C0">运费</div>
			<div class="mui-col-xs-6" style="color: #696969">本商品包邮</div>
			<div class="mui-col-xs-3">
				<a class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0"></a>
			</div>

			<div class="mui-col-xs-3"  style="color: #C0C0C0">促销</div>
			<div class="mui-col-xs-6" style="color: #696969;height: 50px;">
				<div class="buying-info-icon">
					<img style="width:100%;height: 100%;"  src="../../images/一元抢购图标.png">
				</div>
				<span style="font-size: 12px;">一元抢购</span>
				<br  />
				<div class="buying-info-icon">
					<img style="width:200%;height: 120%;"  src="../../images/限购.png">
				</div>
				<span  style="font-size:12px;margin-left:35px; ">首件优惠asdfasdfasdfasdiojjasdffffffffffffffffffffff</span>
			</div>
			<div class="mui-col-xs-3">
				<a class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0"></a>
			</div>




		</div>
		<!-- 产品促销信息END -->

		<!-- 正品信息START -->
		<div class="zheng-info">
			<div class="zheng-info-icon">
				<img style="width:100%;height: 100%;"  src="../../images/正品.png">
			</div>
			<span>小普自营&nbsp|&nbsp正品保证</span>
		</div>
		<!-- 正品信息END-->

		<!-- 邮费信息START -->
		<div class="my-carriage mui-row" style="height: 40px;width: 100%;background-color: white;">
			<div class="mui-col-xs-3"  style="color: #C0C0C0">
				<div class="my-carriage-icon">
					<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
				</div>
				<span>运费</span>
			</div>
			<div class="mui-col-xs-4"  style="color: #C0C0C0">
				<div class="my-carriage-icon">
					<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
				</div>
				<span>12小时发货</span>
			</div>
			<div class="mui-col-xs-4"  style="color: #C0C0C0">
				<div class="my-carriage-icon">
						<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
					</div>
					<span>7天退货</span>
				</div>
			<div class="mui-col-xs-1"  style="color: #C0C0C0">
				<a href="#server" class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0"></a>
			</div>
		</div>
		<!-- 邮费信息START -->
		
		<!-- 底部START -->
		<footer class="my-footer mui-row" style="max-width: 414px;margin: auto;">
			<div class="mui-col-xs-3" style="background-color: white;">
				<a onclick="javascript:goUrl('cartList.html')" class="mui-icon iconfont icon-cart"></a>
			</div>
			<div class="mui-col-xs-4">
				<a  href="#picture">加入购物车</a>
			</div>
			<div class="mui-col-xs-5">
				<a onclick="javascript:goUrl('checkOrder.html')">立即购买</a>
			</div>
		</footer>
		<!-- 底部END  -->
		<div  style="height: 60px;width: 100%"></div>

		<!--服务START-->
		<div id="server" class="mui-popover mui-popover-action mui-popover-bottom" style="max-width: 414px;margin: auto;	background-color: white;">
			<div  class="cart-toggle">
				<div style="width: 100%;text-align: center;">
					<p>服务</p>
				</div>
				<div class="mui-row" style="width: 100%;border-bottom: 1px solid  azure;min-height: 100px;">
					<div class="mui-col-xs-2" style="width: 20px;height: 20px;display: inline-block">
						<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
					</div>
					<div class="mui-col-xs-10">
						<p style="color: #222222;margin-left: 10px;">顺丰快递</p>
						<p style="margin-left: 10px;">安全快速安全快速安全快速安全</p>
					</div>
				</div>

				<div class="mui-row" style="width: 100%;border-bottom: 1px solid azure;min-height: 75px;">
					<div class="mui-col-xs-2" style="width: 20px;height: 20px;display: inline-block">
						<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
					</div>
					<div class="mui-col-xs-10">
						<p style="color: #222222;margin-left: 10px;">24小时发货 </p>
					</div>
				</div>

				<div class="mui-row" style="width: 100%;border-bottom: 1px solid  azure;min-height: 100px;">
					<div class="mui-col-xs-2" style="width: 20px;height: 20px;display: inline-block">
						<img style="width:100%;height: 100%;"  src="../../images/红色钩.png">
					</div>
					<div class="mui-col-xs-10">
						<p style="color: #222222;margin-left: 10px;">7天退货</p>
						<p style="margin-left: 10px;">安全快速安全快速安全快速安</p>
					</div>
				</div>
			</div>
		</div>
		<!--服务END-->
		<!-- 购物车选项START -->
            <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="max-width: 414px;margin: auto;">
				<div  class="cart-toggle">
					<div class="cart-toggle-top">
						<div class="cart-img"></div>
						<span style="color: black">
							<!-- <span style="font-weight: bold;">¥</span> -->
							<span style="font-size: 30px;color: rgb(245,0,89)">¥1.00&nbsp</span>
							<span style="font-size: 20px;text-decoration:line-through">¥12.05
							</span>
						</span>
					</div>
					<div class="cart-toggle-center">
						<!-- <h4 style="font-size: 15px;">规格</h4> -->
							<div class="guige">
								love组合40只
							</div>
														<div class="guige">
								love组合40只
							</div>
														<div class="guige">
								love组合40只
							</div>
														<div class="guige">
								love组合40只
							</div>
														<div class="guige">
								love组合40只
							</div>
														<div class="guige">
								love组合40只
							</div>
					</div>
					<div class="cart-toggle-bottom">
						<h4 style="font-size: 15px;">数量</h4>
						<div class="mui-numbox">
						  <!-- "-"按钮，点击可减小当前数值 -->
						  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						  <input class="mui-numbox-input" type="number" />
						  <!-- "+"按钮，点击可增大当前数值 -->
						  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
						</div>
					</div>
					<div class="mui-btn mui-btn-red mui-popover-bottom cart-btn" style=" background-color: rgb(254,0,89)">
						确定
					</div>
				</div>
            </div>
	</div>
        <!-- 购物车选项END -->

		<script src="../../js/mui.js"></script>
		<script src="../../js/mui.event.js"></script>
		<script src="../../js/mui.lazyload.js"></script>
		<script src="../../js/mui.lazyload.img.js"></script>

		<script src="../../js/myjs/detail.js"></script>
		<!-- 样式改变方法 -->
		<script src="../../js/myjs/commonjs/changeClass.js"></script>
		<script src="../../js/myjs/commonjs/loading.js"></script>
		<script src="../../js/myjs/url.js"></script>

	</body>

</html>